<template>
   <!-- 登录页面 -->
   <div class="login-container">
      <!-- :model 要校验的表单的对象
      :rules 校验规则
       -->
      <el-form
         ref="loginForm"
         :model="loginForm"
         :rules="loginRules"
         class="login-form"
         auto-complete="on"
         label-position="left"
      >
         <div class="title-container">
            <h3 class="title">
               <img
                  src="../../assets/common/login-logo.png"
                  alt=""
               />
            </h3>
         </div>
         <!-- prop 要校验的表单名称 -->
         <el-form-item prop="mobile">
            <span class="svg-container">
               <svg-icon icon-class="user" />
            </span>
            <!-- v-model 校验具体验证的表单框 -->
            <el-input
               ref="username"
               v-model="loginForm.mobile"
               placeholder="请输入手机号"
               name="username"
               type="text"
               tabindex="1"
               auto-complete="on"
            />
         </el-form-item>

         <el-form-item prop="password">
            <span class="svg-container">
               <svg-icon icon-class="password" />
            </span>
            <el-input
               :key="passwordType"
               ref="password"
               v-model="loginForm.password"
               :type="passwordType"
               placeholder="请输入密码"
               name="password"
               tabindex="2"
               auto-complete="on"
               @keyup.enter.native="handleLogin"
            />
            <!-- enter 按键修饰符，监听了回车键
            native 也是修饰符，监听组件的原生事件，根元素，
            也就是说直接绑定在 input 标签上
            如果el-input没有开放事件@keyup必须写native
            具体看文档查看具体开放事件
            -->
            <span class="show-pwd" @click="showPwd">
               <svg-icon
                  :icon-class="
                     passwordType === 'password'
                        ? 'eye'
                        : 'eye-open'
                  "
               />
            </span>
         </el-form-item>

         <el-button
            class="loginBtn"
            :loading="loading"
            type="primary"
            style="width:100%;margin-bottom:30px;"
            @click.native.prevent="handleLogin"
            >登录</el-button
         >

         <div class="tips">
            <span style="margin-right:20px;"
               >账号: 13800000002</span
            >
            <span> 密码: 123456</span>
         </div>
      </el-form>
   </div>
</template>

<script>
import { validMobile } from '@/utils/validate'
import { mapActions } from 'vuex'
export default {
   name: 'Login',
   data() {
      // rule 规则本身
      // value 当前要校验的表单的值
      // callback 无论成功和失败都执行callback
      // 校验失败：传入错误对象 new Error
      const validateMobile = (rule, value, callback) => {
         // if (validMobile(value)) {
         //    callback(new Error('手机号格式不正确'))
         // } else {
         //    callback()
         // }
         validMobile(value)
            ? callback()
            : callback(new Error('手机号格式不正确'))
      }
      return {
         loginForm: {
            mobile: '13800000002',
            password: '123456'
         },
         loginRules: {
            mobile: [
               // 第一个规则满足了进入第二个规则
               {
                  required: true,
                  // 触发校验规则的方式：blur 失去焦点 change：发生变化就校验
                  trigger: 'blur',
                  message: '手机号不能为空'
               },
               {
                  // 自定义校验规则函数
                  validator: validateMobile,
                  trigger: 'blur'
               }
            ],
            password: [
               {
                  required: true,
                  trigger: 'blur',
                  message: '密码不能为空'
               },
               {
                  trigger: 'blur',
                  min: 6,
                  max: 16,
                  message: '密码长度为6 - 16位'
               }
            ]
         },
         loading: false,
         passwordType: 'password',
         redirect: undefined
      }
   },
   watch: {
      $route: {
         handler: function(route) {
            this.redirect =
               route.query && route.query.redirect
         },
         immediate: true
      }
   },
   methods: {
      // 引入方法
      ...mapActions(['user/login']),
      showPwd() {
         if (this.passwordType === 'password') {
            this.passwordType = ''
         } else {
            this.passwordType = 'password'
         }
         this.$nextTick(() => {
            this.$refs.password.focus()
         })
      },
      handleLogin() {
         // 表单的手动校验
         // ref 可以获取到一个元素的dom 对象
         // ref 作用到组件上时，可以获取到该组件的实例，就是组件里的 this
         this.$refs.loginForm.validate(async isOK => {
            if (isOK) {
               try {
                  this.loading = true
                  // 只有校验通过了，才去调用 action
                  // this.$store.dispatch('user/login')
                  await this['user/login'](this.loginForm)
                  // 异步函数，要等待成功之后
                  // 强制等待成功
                  // async 包裹的函数实际上是一个 promise 对象
                  // await 标记的函数都是成功执行的代码,
                  // 因为响应拦截器已经处理过了,错误直接报错
                  // 登录成功之后跳转主页
                  this.$router.push('/')
                  // this.loading = false
               } catch (error) {
                  console.log(error)
                  // this.loading = false
               } finally {
                  // 不论执行 try 还是 catch 最后都会进入这里
                  this.loading = false
               }
            }
         })
      }
   }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #68b0fe; // 将输入框颜色改成蓝色
$cursor: red;

@supports (-webkit-mask: none) and
   (not (cater-color: $cursor)) {
   .login-container .el-input input {
      color: $cursor;
   }
}

/* reset element-ui css */
.login-container {
   background-image: url('../../assets/common/login.jpg');
   // 居中平铺
   background-position: center;
   .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
         background: transparent;
         border: 0px;
         -webkit-appearance: none;
         border-radius: 0px;
         padding: 12px 5px 12px 15px;
         color: $light_gray;
         height: 47px;
         caret-color: $cursor;

         &:-webkit-autofill {
            box-shadow: 0 0 0px 1000px $bg inset !important;
            -webkit-text-fill-color: $cursor !important;
         }
      }
   }

   .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(
         255,
         255,
         255,
         0.7
      ); // 输入登录表单的背景色
      border-radius: 5px;
      color: #454545;
   }
   .el-form-item__error {
      color: #fff;
   }
   .loginBtn {
      background: #407ffe;
      height: 64px;
      line-height: 32px;
      font-size: 24px;
   }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
   min-height: 100%;
   width: 100%;
   background-color: $bg;
   overflow: hidden;

   .login-form {
      position: relative;
      width: 520px;
      max-width: 100%;
      padding: 160px 35px 0;
      margin: 0 auto;
      overflow: hidden;
   }

   .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;

      span {
         &:first-of-type {
            margin-right: 16px;
         }
      }
   }

   .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
   }

   .title-container {
      position: relative;

      .title {
         font-size: 26px;
         color: $light_gray;
         margin: 0px auto 40px auto;
         text-align: center;
         font-weight: bold;
      }
   }

   .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
   }
}
</style>
